import React from 'react';
import PropTypes from 'prop-types';

export default class TodoItem extends React.Component {

  static propTypes = {
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    onClick: PropTypes.func
  };

  handleClick = (index) => {
    this.props.onClick && this.props.onClick(index);
  };

  render() {
    const {completed, text, value} = this.props;
    return (
        <li
            className={completed ? "todo-item completed" : "todo-item"}
            onClick={this.handleClick.bind(null, value)}
        >
            <span>
              {text}
            </span>
        </li>
    );
  }

}
